import React, { useEffect, useState } from 'react'
import '../App.css'
import { Button, Flex } from 'antd';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

export default function List() {
  let nav = useNavigate()
  let [list, setList] = useState([])

  let show = async () => {
    let { data } = await axios.get('http://localhost:3005/yjx/show')
    if (data.code === 200) {
      setList(data.data)
    }
  }

  useEffect(() => {
    show()
  }, [])
  return (
    <div id='y-list'>
      {/* 主页面 */}
      {
        list.map((i, item) => (
          <div className='menu' key={item}>
            {/* 医院详情 */}
            <div className='detail'>
              {/* 医院详情上文 */}
              <div className='above'>
                <h4 style={{ padding: '10px 20px', color: '#555555', fontSize: '18px', fontWeight: 'bold' }}>医院详情</h4>
                <div style={{ display: 'flex', padding: '8px 40px' }}>
                  <h4 style={{ color: '#555555', fontSize: '15px', fontWeight: 'bold' }}>河北大学第一附属医院</h4>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <div style={{
                    width: '80px',
                    height: '22px',
                    background: '#f2f2f2',
                    textAlign: 'center',
                    lineHeight: '22px',
                    fontSize: '13px',
                    color: '#a19c9e'
                  }}><span style={{ color: '#19be6b' }}>●</span>三级甲等</div>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <div style={{
                    width: '100px',
                    height: '22px',
                    background: '#f2f2f2',
                    textAlign: 'center',
                    lineHeight: '22px',
                    fontSize: '13px',
                    color: '#a19c9e'
                  }}><span style={{ color: '#f56c6c' }}>●</span>每天8:30放号</div>
                </div>
                <span style={{ padding: '8px 40px', fontSize: '12px', color: '#555555' }}>创建时间：2021-09-12 12:12:12</span>
              </div>
              {/* 医院详情下文 */}
              <div className='sequel'>
                <h4 style={{ color: '#7f7f7f', padding: '18px 40px', fontSize: '18px' }}>▌医院简介</h4>
                <div style={{ color: '#7f7f7f', width: '90%', fontSize: '13px', lineHeight: '23px', padding: '8px 40px' }}>
                  {i.introduction}
                </div>
              </div>
            </div>
            {/* 基本信息 */}
            <div className='mation'>
              <div className='header'>
                <span className='a'>基本信息</span>
                <Button type="primary" onClick={() => {
                  nav(`/EditDetails`, { state: { hospital: i } })
                }}>编辑信息</Button>
              </div>
              <table>
                <tr>
                  <td className='zleft'>医院名称：</td>
                  <td style={{ padding: '0 10px', fontWeight: 'bold', color: '#555555' }}>河北大学第一附属医院</td>
                </tr>
                <tr>
                  <td className='zleft'>医院ID:</td>
                  <td style={{ padding: '0 10px', fontSize: '20px', color: '#7f8396' }}>0098</td>
                </tr>
                <tr>
                  <td className='zleft'>医院分类:</td>
                  <td className='a1'>{i.classify}</td>
                </tr>
                <tr>
                  <td className='zleft'>医院性质:</td>
                  <td className='a1'>{i.quality}</td>
                </tr>
                <tr>
                  <td className='zleft'>是否支持医保:</td>
                  <td className='a1'>{i.care}</td>
                </tr>
                <tr>
                  <td className='zleft'>医院等级:</td>
                  <td className='a1'>{i.grade}</td>
                </tr>
                <tr>
                  <td className='zleft'>所在地区:</td>
                  <td className='a1'>{i.regiona}-{i.regionb}-{i.regionc}</td>
                </tr>
                <tr>
                  <td className='zleft'>详细地址:</td>
                  <td className='a1'>{i.address}</td>
                </tr>
                <tr>
                  <td className='zleft'>乘车路线:</td>
                  <td className='a1'>{i.route}</td>
                </tr>
                <tr>
                  <td className='zleft'>联系电话:</td>
                  <td className='a1'>{i.phone}</td>
                </tr>
                <tr>
                  <td className='zleft'>医院官网:</td>
                  <td className='a1'>{i.website}</td>
                </tr>
                <tr>
                  <td className='zleft'>创建时间:</td>
                  <td className='a1'>2021-09-01 12:12:12</td>
                </tr>
                <tr>
                  <td className='zleft'>更新时间:</td>
                  <td className='a1'>2021-09-01 12:12:12</td>
                </tr>
              </table>
            </div>
          </div>
        ))
      }
    </div>
  )
}
